/**
 * 首页英雄区域组件
 * 包含主标题、核心指标展示、背景图等
 */

import { motion } from "framer-motion";

interface HeroSectionProps {
    onScrollToSection: (sectionId: string) => void;
    sectionRef: (el: HTMLElement | null) => void;
}

export default function HeroSection({ onScrollToSection, sectionRef }: HeroSectionProps) {
    return (
        <section
            ref={sectionRef}
            className="relative min-h-screen flex items-center justify-center overflow-hidden"
            style={{
                background: "linear-gradient(135deg, #1E293B 0%, #334155 100%)"
            }}>
            {/* 背景图片 */}
            <div className="absolute inset-0 opacity-20">
                <img
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=AI%20data%20analysis%20background%2C%20blue%20digital%20abstract%20pattern&sign=6924c59c515501958513a22734613712"
                    alt="AI数据分析背景"
                    className="w-full h-full object-cover" />
            </div>
            
            {/* 主要内容 */}
            <div className="relative z-10 max-w-5xl mx-auto px-6 text-center text-white py-20">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    animate={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.8
                    }}>
                    <h1 className="font-['Playfair_Display'] text-5xl md:text-7xl font-bold mb-6 tracking-tight drop-shadow-lg">
                        <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-white">
                            AI简历解析
                        </span>
                    </h1>
                    <p className="text-xl md:text-3xl font-light tracking-wide text-blue-100 mb-8 max-w-3xl mx-auto">
                        重塑招聘流程的智能革命
                    </p>
                    <div className="w-24 h-1 bg-gradient-to-r from-blue-400 to-indigo-400 rounded-full mx-auto my-8"></div>
                    <p className="text-lg md:text-xl text-blue-100 leading-relaxed mb-10 max-w-3xl mx-auto">
                        基于大模型技术的新一代简历解析系统，实现高效、精准的人才筛选
                    </p>
                    
                    {/* 核心指标 */}
                    <div className="flex flex-wrap justify-center items-center gap-8 md:gap-12 mt-8">
                        <div className="flex flex-col items-center p-4 rounded-xl bg-white/10 backdrop-blur-sm transition-transform hover:scale-105">
                            <div className="text-3xl md:text-4xl font-bold text-blue-300 mb-2">3秒</div>
                            <div className="text-sm text-blue-200">简历处理速度</div>
                        </div>
                        <div className="hidden md:block w-px h-16 bg-blue-400/30"></div>
                        <div className="flex flex-col items-center p-4 rounded-xl bg-white/10 backdrop-blur-sm transition-transform hover:scale-105">
                            <div className="text-3xl md:text-4xl font-bold text-blue-300 mb-2">98%</div>
                            <div className="text-sm text-blue-200">解析精准度</div>
                        </div>
                        <div className="hidden md:block w-px h-16 bg-blue-400/30"></div>
                        <div className="flex flex-col items-center p-4 rounded-xl bg-white/10 backdrop-blur-sm transition-transform hover:scale-105">
                            <div className="text-3xl md:text-4xl font-bold text-blue-300 mb-2">20+</div>
                            <div className="text-sm text-blue-200">支持文件格式</div>
                        </div>
                    </div>
                    
                    {/* CTA按钮 */}
                    <motion.button
                        initial={{
                            opacity: 0,
                            y: 20
                        }}
                        animate={{
                            opacity: 1,
                            y: 0
                        }}
                        transition={{
                            duration: 0.8,
                            delay: 0.3
                        }}
                        onClick={() => onScrollToSection("pain-points")}
                        className="mt-12 px-8 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                        了解更多 <i className="fa-solid fa-arrow-down ml-2"></i>
                    </motion.button>
                </motion.div>
            </div>
        </section>
    );
}